<template>
    <div style="display: flex;background-color:rgb(221.7, 222.6, 224.4);width:100%;height:500px ">
        <el-form ref="dataFormRef" :model="dataForm" label-width="100px" style="margin-top: 25px;width: 800px"
            :rules="rules">
            <el-form-item label="车次">
                <el-input v-model="dataForm.trainNumber" placeholder="请输入车次" />
            </el-form-item>
            <el-form-item label="列车类型">
                <el-select v-model="dataForm.type" placeholder="请选择列车类型">
                    <el-option v-for="item in trainTypeOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="发车时间">
                <el-date-picker v-model="dataForm.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择发车时间" style="width: 300px;"/>
            </el-form-item>
            <el-form-item label="停车时间">
                <el-date-picker v-model="dataForm.stopTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择停车时间" style="width: 300px;"/>
            </el-form-item>
            <el-form-item label="商务座数量">
                <el-input-number v-model="dataForm.businessNum" placeholder="请输入商务座数量" :min="0" :step="4" step-strictly  style="width: 300px;"/>
            </el-form-item>
            <el-form-item label="普通座数量">
                <el-input-number v-model="dataForm.commonNum" placeholder="请输入普通座列数" :min="0" :step="6" step-strictly style="width: 300px;"/>
            </el-form-item>
            <el-form-item label="列车状态">
                <el-select v-model="dataForm.status" placeholder="请选择列车状态">
                    <el-option v-for="item in trainStatusOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item style="margin-top: 30px;">
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button @click="router.push({ name: 'train' })">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const dataFormRef = ref(null);
// 表单
const dataForm = reactive({
    trainId: null,
    trainNumber: '',
    type: 0,
    startTime: '',
    stopTime: '',
    businessNum: 0,
    commonNum: 0,
    status: 1
});
// 表单校验
const rules = {}
// 列车类型
const trainTypeOptions = ref([
    {
        label: '普通',
        value: 0
    },
    {
        label: '特快',
        value: 1
    }
])
// 列车状态
const trainStatusOptions = ref([
    {
        label: '禁用',
        value: 0
    },
    {
        label: '启用',
        value: 1
    },
    {
        label: '维修',
        value: 2
    }
])
/**
 * 表单提交
 */
const onSubmit = () => {
    proxy.Confirm({
        message: '确定提交？',
        okfun: async () => {
            let params = {};
            Object.assign(params, dataForm);
            if (!params.startTime || params.startTime.length == 0) {
                delete params.startTime;
            }
            if (!params.stopTime || params.stopTime.length == 0) {
                delete params.stopTime;
            }
            let result = await proxy.Request.request({
                url: proxy.Api.addOrUpdateTrain,
                params: params
            });
            if (!result) {
                return;
            }
            proxy.Message.success("提交成功");
            router.push({ name: 'train' });
        }
    })
}
onMounted(() => {
        const row = route.query.row ? JSON.parse(route.query.row) : null;
        if (row) {
            dataForm.trainId = row.trainId;
            dataForm.trainNumber = row.trainNumber;
            dataForm.type = row.type;
            dataForm.startTime = row.startTime;
            dataForm.stopTime = row.stopTime;
            dataForm.businessNum = row.businessNum;
            dataForm.commonNum = row.commonNum;
            dataForm.status = row.status;
        }
    })
</script>

<style scoped>
.el-form {
    .el-form-item {
        width: 400px;
    }
}
</style>